<template>
  <div class="container">
    <!-- 基础用法 -->
    <Description title="用户信息" :schema="schema" :data="userData" bordered />

    <!-- 使用 useDescription 创建的组件 -->
    <Description1 />

    <!-- 自定义渲染示例 -->
    <Description title="订单信息" :schema="orderSchema" :data="orderData" :column="4" size="small" />

    <!-- 使用 useDescription 带自定义渲染 -->
    <Description2 />
  </div>
</template>

<script lang="ts" setup>
import { ref, h } from 'vue';
import { Description, useDescription } from './index';

// 模拟数据
const userData = {
  name: '张三',
  age: 20,
  gender: '男',
  email: 'zhangsan@example.com',
  phone: '13800138000',
};

const orderData = {
  orderNo: 'ORD20230615001',
  status: '已支付',
  amount: 299.99,
  paymentMethod: '微信支付',
  createTime: '2023-06-15 10:30:00',
  deliveryAddress: '北京市朝阳区某某街道123号',
};

// 基础 schema
const schema = [
  {
    field: 'name',
    label: '姓名',
  },
  {
    field: 'age',
    label: '年龄',
  },
  {
    field: 'gender',
    label: '性别',
  },
  {
    field: 'email',
    label: '邮箱',
  },
  {
    field: 'phone',
    label: '电话',
  },
];

// 订单 schema 带自定义渲染（使用h函数替代JSX）
const orderSchema = [
  {
    field: 'orderNo',
    label: '订单编号',
  },
  {
    field: 'status',
    label: '订单状态',
    render: (value: string) => {
      const statusMap = {
        已支付: 'green',
        待支付: 'orange',
        已取消: 'red',
      };
      return h('span', { style: { color: statusMap[value] || 'gray' } }, value);
    },
  },
  {
    field: 'amount',
    label: '金额',
    render: (value: number) => h('span', `¥${value.toFixed(2)}`),
  },
  {
    field: 'paymentMethod',
    label: '支付方式',
  },
  {
    field: 'createTime',
    label: '创建时间',
  },
  {
    field: 'deliveryAddress',
    label: '配送地址',
    span: 2, // 跨两列
  },
];

// 使用 useDescription 创建组件实例
const [Description1] = useDescription({
  title: '无边框用户信息',
  bordered: false,
  data: userData,
  schema: schema,
});

// 使用 useDescription 创建带自定义配置的组件（不使用JSX）
const [Description2] = useDescription({
  title: '高级订单信息',
  data: orderData,
  schema: [
    {
      field: 'orderNo',
      label: '订单编号',
      labelClassName: 'text-bold',
    },
    {
      field: 'status',
      label: '订单状态',
      render: (value: string) => {
        const statusMap = {
          已支付: 'green',
          待支付: 'orange',
          已取消: 'red',
        };
        return h('span', { class: `font-weight-bold text-${statusMap[value] || 'gray'}` }, value);
      },
    },
    {
      field: 'amount',
      label: '金额',
      contentClassName: 'text-primary',
    },
    {
      field: 'createTime',
      label: '创建时间',
    },
  ],
  column: 2,
  size: 'small',
  className: 'mt-4',
});
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.text-bold {
  font-weight: bold;
}

.text-primary {
  color: #1890ff;
}

.mt-4 {
  margin-top: 1rem;
}
</style>
